<template>
	<div class="index">
		<!--search panel-->
		<div class="search-panel">
			<div class="search-box">
				<input v-model="searchValue" @keypress="handleChangeSearchProduct" type="text" placeholder="搜索母婴/数码/服装/户外运动/家居用品" />
				<i class="mintui mintui-search" @click="handleSearchKeywords"></i>
			</div>
		</div>
		<!--swiper-->
		<mt-swipe :auto="4000" style="height: 3.5rem;" class="bg">
			<mt-swipe-item v-for="item in topBannerList" :key="item.id">
				<img :src="item.url" />
			</mt-swipe-item>
		</mt-swipe>
		<!--navbar-->
		<ul class="navbar-icon bg">
			<li v-for="(item,idx) in otherProduct" :key="idx" @click="handleClickBB(item)">
				<img :src="item.iconLink" :alt="item.text" />
				<p>{{item.text}}</p>
			</li>
		</ul>
		<!--notice-->

		<!--recommend-->
		<!--<div class="recommend bg">
			<mt-swipe :auto="4000" style="height: 1.5rem;">
				<mt-swipe-item>1</mt-swipe-item>
				<mt-swipe-item>2</mt-swipe-item>
				<mt-swipe-item>3</mt-swipe-item>
			</mt-swipe>
		</div>-->
		<div class="hot bg" v-if="!!productList">
			<mt-cell title="推荐商品">
				<router-link :to="{ path: '/product_list?id=null&name=推荐商品'}">
					更多
				</router-link>
			</mt-cell>
			<!--product list-->
			<productlist :list="productList"></productlist>
		</div>
		<!--new product-->

		<!--tabbar-->
		<tabbar></tabbar>
	</div>
</template>

<script>
	import productlist from '../Sub/ProductList';
	import tabbar from '../Sub/Tabbar';
	import { MessageBox } from 'mint-ui';
	export default {
		name: 'index',
		data() {
			var arr = [{
				text: '宝宝转',
				linkUrl: '',
				iconLink: 'http://www.pdymb.com/Public/Shop/afd/images/bbzhuan.png'
			}, {
				text: '宝宝投',
				linkUrl: '',
				iconLink: 'http://www.pdymb.com/Public/Shop/afd/images/nav2.png'
			}, {
				text: '宝宝贷',
				linkUrl: '',
				iconLink: 'http://www.pdymb.com/Public/Shop/afd/images/nav3.png'
			}, {
				text: '宝宝存',
				linkUrl: '',
				iconLink: 'http://www.pdymb.com/Public/Shop/afd/images/nav5.png'
			}, {
				text: '宝宝游',
				linkUrl: '',
				iconLink: 'http://www.pdymb.com/Public/Shop/afd/images/nav4.png'
			}, {
				text: '宝宝直播',
				linkUrl: '',
				iconLink: 'http://www.pdymb.com/Public/Shop/afd/images/bbzb.png'
			}, {
				text: '宝宝商',
				linkUrl: '',
				iconLink: 'http://www.pdymb.com/Public/Shop/afd/images/nav2.png'
			}, {
				text: '宝宝购',
				linkUrl: '',
				iconLink: 'http://www.pdymb.com/Public/Shop/afd/images/bbg.png'
			}, {
				text: '宝宝住',
				linkUrl: '',
				iconLink: 'http://www.pdymb.com/Public/Shop/afd/images/nav5.png'
			}, {
				text: '宝宝行',
				linkUrl: '',
				iconLink: 'http://www.pdymb.com/Public/Shop/afd/images/bbx.png'
			}, {
				text: '宝宝聘',
				linkUrl: '',
				iconLink: 'http://www.pdymb.com/Public/Shop/afd/images/bbp.png'
			}, {
				text: '宝宝智',
				linkUrl: '',
				iconLink: 'http://www.pdymb.com/Public/Shop/afd/images/bbzhi.png'
			}, {
				text: '宝宝宝',
				linkUrl: '',
				iconLink: 'http://www.pdymb.com/Public/Shop/afd/images/bbb.png'
			}, {
				text: '宝宝爱',
				linkUrl: '',
				iconLink: 'http://www.pdymb.com/Public/Shop/afd/images/nav2.png'
			}]
			return {
				searchValue: '',
				productList: sessionStorage.getItem('productList') ? JSON.parse(sessionStorage.getItem('productList')) : [],
				otherProduct: arr,
				topBannerList: sessionStorage.getItem('topBannerList') ? JSON.parse(sessionStorage.getItem('topBannerList')) : []
			}
		},
		components: {
			productlist,
			tabbar
		},
		methods: {
			getData() {
				this.$http.post('/mobileindex/index.htm', {

				}).then(res => {
					if(res.code == 0) {
						sessionStorage.setItem('cookieId', res.cookieId);
						sessionStorage.setItem('productList', JSON.stringify(res.data.store_reommend_goods));
						this.productList = res.data.store_reommend_goods;
					}
				})
			},
			handleChangeSearchProduct(e) {
				var keycode = e.keyCode;
				//获取搜索框的值
				if(keycode == '13') {
					e.preventDefault();
					//请求搜索接口
					this.handleSearchKeywords();
				}
			},
			handleSearchKeywords() {
				this.$router.push('/product_list?keywords=' + this.searchValue);
			},
			handleClickBB(row) {
				MessageBox('提示', row.text + '暂未开通');
			},
			getBannerList() {
				if(this.topBannerList.length > 0) {
					return;
				}
				this.$http.post('/mobileindex/bannerlist.htm', {

				}).then(res => {
					if(res.code == 0) {
						sessionStorage.setItem('topBannerList', JSON.stringify(res.data));
						this.topBannerList = res.data;
					}
				})
			}
		},
		created() {
			this.getData();
			this.getBannerList();
			sessionStorage.setItem('tabbarItem', 'index');
			this.api.setHeader('商城首页');
		}
	}
</script>

<style lang="less">
	.index {
		background-color: #EFEFEF;
		padding-bottom: 1rem;
		.bg {
			background-color: #FFFFFF;
		}
		.search-panel {
			width: 100%;
			height: 0.9rem;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 10;
			.search-box {
				width: 78%;
				margin: 0.2rem auto;
				position: relative;
				z-index: 10;
				input {
					display: block;
					width: 100%;
					box-sizing: border-box;
					padding: 0.14rem 0.9rem 0.14rem 0.1rem;
					border: none;
					background: rgba(255, 255, 255, 0.3);
					border-radius: 0.12rem;
					border: 1px solid #F2CB80;
				}
				i {
					position: absolute;
					right: 0.2rem;
					top: 0;
					padding: 7px 0;
					color: #CDCDCD;
				}
			}
		}
		.navbar-icon {
			margin: 0;
			list-style: none;
			padding: 0;
			white-space: nowrap;
			overflow: auto;
			margin-top: 0.2rem;
			li {
				display: inline-block;
				padding: 0.2rem;
				img {
					display: block;
					width: 1.2rem;
					margin-bottom: 0.1rem;
				}
				p {
					font-size: 0.24rem;
					text-align: center;
				}
			}
		}
		.hot,
		.recommend {
			margin-top: 0.2rem;
			.mint-cell {
				min-height: 0.72rem;
			}
		}
	}
</style>